.home-content {
		background-color: #1e2236;

		.navigation-bar {
			position: absolute;
			width: 100%;
			height: 90rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding: 0 30rpx;
			z-index: 1000;

			&>view {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #383a60;
				border-radius: 50%;

				.nav-img {
					width: 32rpx;
				}
			}
		}

		.swiper-box {
			position: relative;
		}

		.preview-container {
			padding: 0 30rpx 40rpx;
			background-color: #21273f;

			.radio-broadcast {
				height: 78rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid rgba(255, 255, 255, .1);

				.notice-img {
					width: 24rpx;
				}

				.notice-box {
					width: calc(100% - 62rpx);
					font-weight: bold;
				}

				.notice-more {
					width: 38rpx;
					display: flex;
					justify-content: space-between;

					&>span {
						width: 8rpx;
						height: 8rpx;
						display: inline-block;
						background-color: #fff;
						border-radius: 50%;
					}
				}
			}

			.line-chart-box {
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;
				font-size: 22rpx;

				.line-title-container {
					&>text {
						font-weight: bold;

						&.medium-font {
							color: #fff;
							font-weight: normal;
						}

						&.fall {
							color: #11caa1;
						}

						&.rise {
							color: #c64a5d;
						}
					}

				}
			}

			.preview-handle {
				padding: 0 26rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				.preview-handle-box {
					text-align: center;
					color: #fefefe;
					font-size: 26rpx;
					// flex-grow: 1;

					.preview-handle-image-box {
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
						border: 2rpx solid rgba(255, 255, 255, .54);
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 0 auto 24rpx;

						.preview-handle-image {
							width: 40rpx;
						}
					}
				}
			}
		}

		.buy-crypto {
			height: 130rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			background-color: #21273F;
			margin-top: 20rpx;

			.left-box {
				color: rgba(255, 255, 255, .54);
				margin-right: 74rpx;

				&>text {
					display: block;
					font-size: 24rpx;

					&:first-child {
						opacity: .8;
						font-size: 36rpx;
					}
				}
			}

			.right-box {
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				margin-left: 84rpx;
				background-image: linear-gradient(0deg,
					#dda84b 0%,
					#f7d18d 100%),
					linear-gradient(#eec67f,
					#eec67f);
				background-blend-mode: normal,
					normal;
				border-radius: 50%;
				color: #fff;
			}
		}

		.show-list {
			padding: 52rpx 30rpx 20rpx;
			margin-top: 20rpx;
			background-color: #21273F;

			.show-list-top {
				display: flex;
				justify-content: space-between;
				position: relative;
				padding-bottom: 20rpx;
				border-bottom: 1px solid rgba(255, 255, 255, .1);

				&>p {
					position: absolute;
					width: 80rpx;
					height: 4rpx;
					bottom: 0;
					transition: left .2s linear;
				}

				.show-list-top-box {
					color: rgba(255, 255, 255, .54);

					&.active {
						font-weight: bold;
						color: #EEC67F;
					}
				}
			}

			.show-list-data {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 138rpx;
				border-bottom: 1px solid rgba(255, 255, 255, .1);

				.left-box {
					&>text {
						font-size: 24rpx;
						color: #fff;
						opacity: .54;

						&:first-child {
							font-weight: bold;
							font-size: 32rpx;
							opacity: 1;
							margin-right: 7rpx;
						}
					}
				}

				.right-box {
					&>text {
						font-weight: bold;

						&.fall {
							color: #c64a5d;
							display: block;
							text-align: right;
						}

						&.rise {
							display: block;
							color: #11caa1;
							text-align: right;
						}
					}
				}
			}
		}

		.personal-box {
			height: 100%;
			color: #fff;
			font-size: 28rpx;

			.personal-information {
				padding-top: 168rpx;
				padding-left: 30rpx;
				height: 252rpx;
				display: flex;
				position: relative;
				margin-bottom: 80rpx;

				.avatar-first {
					width: 142rpx;
					height: 142rpx;
					border-radius: 50%;
					border: 4rpx solid rgba(238, 198, 127, .1);

					.avatar-second {
						width: 134rpx;
						height: 134rpx;
						border-radius: 50%;
						border: solid 4rpx #ffe8bf;
						
					}
						.avatar-three {
							// top: 4rpx;
							// left: 4rpx;
						}
				}

				.information {
					height: 142rpx;
					display: flex;
					align-items: center;
					margin-left: 30rpx;

					text {
						display: block;
						color: rgba(255, 255, 255, .54);

						&.white-text {
							font-size: 32rpx;
							font-weight: bold;
							color: #fff;
							margin-bottom: 20rpx;
						}
					}
				}
				
				.personal-card {
					position: absolute;
					bottom: -60rpx;
				}
			}
			
			.personal-container {
				width: 560rpx;
				margin: 0 auto 58rpx;
			}
			
			.personal-list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 30rpx;
				padding: 0 30rpx;
				margin-bottom: 60rpx;
				.personal-image {
					height: 30rpx;
					margin-right: 30rpx;
				}
				& > text {
					width: calc(100% - 80rpx);
					font-size: 28rpx;
				}
				
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
	.card {
		width: 560rpx;
		height: 120rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10rpx 0 30rpx;
		
		.left-view {
			& >text {
				display: block;
				font-size: 24rpx;
				color: rgba(255, 255, 255, .54);
				
				&:first-child {
					font-weight: bold;
					color: #fff;
					font-size: 28rpx;
				}
			}
		}
		
		&.resh {
			background-color: #11caa1;
		}
	}